import React, { useState } from 'react'
import Header from '../../components/Header'
import FooterBar from '../../components/FooterBar'
import touImg from '../../assets/image/头像 男孩.png'
import duanweiImg from '../../assets/image/汉堡.png'
import { SetOutline, ChatCheckOutline } from 'antd-mobile-icons';
import { Drawer } from 'antd'
import { useNavigate } from 'react-router-dom'
import './index.css'
import { List } from 'antd-mobile'




export default function My(props: any) {
    const [open, setOpen] = useState(false);
    const navigate = useNavigate()
    const res = {
        name: '肖二拾',
        tittle: '好好学习天天向上',
        lookNum: 10,
        soukNum: 140,
        orderNum: 1200,
        footNum: 10,
    }

    const hanldeSet = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };

    const backLogin = () => {
        navigate('/login')
    }

    const handleClick = (value: any) => {
        console.log('value', value);

    }

    const jumpPage = () => {
        navigate('/money')
    }
    const jumpDuan = () => {
        navigate('/duanwei')
    }

    const renderMyIndex = () => {
        return (
            <div>
                <div className='bcImg'>
                    <SetOutline
                        className='My_set'
                        onClick={() => hanldeSet()}
                    />
                    <ChatCheckOutline
                        className='My_setTwo'
                        onClick={() => jumpPage()}
                    />
                </div>
                {/* 个人信息 */}
                <div className='touxiang'>
                    <div className='touxiang_img'>
                        <img src={touImg} alt="" className='touImg' />
                        <img src={duanweiImg} alt="" className='duanweiImg' onClick={() => jumpDuan()} />
                    </div>
                    <h2>昵称：{res.name}</h2>
                    <div className='qianMin'>个性签名: {res.tittle}</div>
                </div>
                {/* 栏目 */}
                <div className='My_lanMu'>
                    <div className='My_sapn'>
                        <div>
                            喜欢
                        </div>
                        <div className='My_sapn_num'>
                            {res.lookNum}
                        </div>
                    </div>
                    <div className='My_sapn'>
                        <div>
                            收藏
                        </div>
                        <div className='My_sapn_num'>
                            {res.soukNum}
                        </div>
                    </div>
                    <div className='My_sapn'>
                        <div>
                            消费积分
                        </div>
                        <div className='My_sapn_num'>
                            {res.orderNum}
                        </div>
                    </div>
                </div>
                {/* 栏目2 */}
                <List mode='card' header='我的权益'>
                    <List.Item extra='按照支付设置的顺序扣款' onClick={handleClick}>
                        扣款方式
                    </List.Item>
                    <List.Item extra='200元' onClick={handleClick}>
                        月限额
                    </List.Item>
                    <List.Item onClick={handleClick}>帮助中心</List.Item>
                    <List.Item onClick={handleClick}>关闭服务</List.Item>
                </List>
            </div>
        )
    }

    return (
        <div>
            <Header />
            {renderMyIndex()}
            <FooterBar />
            <Drawer
                title="设置"
                placement={'left'}
                closable={false}
                onClose={onClose}
                open={open}
                key={'left'}
                width={250}
            >
                <div className='My_set_hang'>主题设置</div>
                <div className='My_set_hang'>账户安全</div>
                <div className='My_set_hang'>关于</div>
                <div className='My_set_hang'>联系客户</div>
                <div className='My_set_hang' onClick={() => backLogin()}>退出登录</div>
            </Drawer>
        </div>
    )
}
